<!--
触摸拖动组件
emit：
touchstart(x,y)
touching(x,y)
touchend(x,y)
slot:
默认插槽
props:
monitor: 是否监听，默认 true
prevent： 是否阻止传播， 默认 true
-->
<template>
  <div class="touch"  @touchstart="start" v-on:touchmove.prevent.stop="touching" @touchend="end">
      <slot>
           
      </slot>
  </div>
</template>
<style>
.touch{
  position: absolute; 
}
</style>
<script>
export default {
  props:{
    monitor:{
      default: true,
    },
    prevent:{
      default: true
    }
  },
  methods:{
    start:function(event){
      
      this.$emit('touchstart',event.changedTouches["0"].clientX,event.changedTouches["0"].clientY);
      if(this.prevent)
      { 
        event.stopPropagation();
      }
    },
    touching:function(event){
      
      if(this.monitor)
      {
      this.$emit('touching',event.changedTouches["0"].clientX,event.changedTouches["0"].clientY)
      }
      if(this.prevent)
      {
        event.stopPropagation();
      }
    },
    end:function(){
      this.$emit('touchend',event.changedTouches["0"].clientX,event.changedTouches["0"].clientY);
      if(this.prevent)
      {
        event.stopPropagation();
      }
    }
  }
}
</script>


